<template>
   <div class="wrapper index-banner">
        <swiper :options="swiperOption" >
        <!-- slides -->
        <swiper-slide v-for="item of list" :key="item.id">
          <a :href="item.url" target="_blank">
            <img class="swiper-img" :src="item.img.url" alt="">
          </a>
        </swiper-slide>
        
        
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        
        
        </swiper>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexBanner',
  data () {
    return {
      msg: 'index',
      id:6,
      list:[],
      swiperOption:{
                  pagination:'.swiper-pagination',
                  loop:true,
                  autoplay:3000,
                  autoplayDisableOnInteraction: false
              }
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'banner/'+this.id,
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
      // console.log(response)
      this.list = response.data.items
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-banner
  height 500px
img 
    width 100%
    height 500px
</style>
